<template>
    <div class="xzcs-pc-templates-detail">
        <div class="nav flex">
            <div>
                <i class="el-icon-s-home"></i>
                当前位置：
            </div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <nuxt-link to="/">首页</nuxt-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <nuxt-link to="/templates">模板专区</nuxt-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-if="info">
                    <nuxt-link
                        :to="`/templates/modelarea/${info.tid}/${info.s_tid}/1`"
                    >
                        {{ info.s_tname }}
                    </nuxt-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-if="info">
                    {{ info.title }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="main-body flex">
            <div class="left">
                <div class="left_top">
                    <div class="c333 fz24 title-collect">
                        <h1 class="title">
                            {{ info.title }}
                        </h1>
                        <no-ssr>
                            <div
                                :class="[
                                    info.is_collect == 1
                                        ? 'collect-s'
                                        : 'collect',
                                ]"
                                @click="setCollect"
                            >
                                <i
                                    :class="[
                                        info.is_collect == 1
                                            ? 'el-icon-star-on'
                                            : 'el-icon-star-off',
                                    ]"
                                ></i
                                >{{ info.is_collect == 1 ? "已收藏" : "收藏" }}
                            </div>
                        </no-ssr>
                    </div>
                    <div
                        class="abstract"
                        v-if="info && info.abstract"
                        v-html="info.abstract"
                    ></div>
                    <div
                        class="pic mt30"
                        v-for="(item, index) in picList"
                        :key="index"
                    >
                        <img :src="item" :alt="info.title" />
                    </div>
                </div>
                <div class="left_middle">
                    <div v-if="info" class="prev-next">
                        <div v-if="info.prevdata">
                            <div class="name">
                                上一篇：
                                <nuxt-link
                                    :to="`/templates/${info.prevdata.id}.html`"
                                    target="_blank"
                                    rel="prev"
                                >
                                    {{ info.prevdata.title }}
                                </nuxt-link>
                            </div>
                            <div class="time">
                                {{ info.prevdata.push_date }}
                            </div>
                        </div>
                        <div v-if="info.nextdata">
                            <div class="name">
                                下一篇：
                                <nuxt-link
                                    :to="`/templates/${info.nextdata.id}.html`"
                                    target="_blank"
                                    rel="next"
                                >
                                    {{ info.nextdata.title }}
                                </nuxt-link>
                            </div>
                            <div class="time">
                                {{ info.nextdata.push_date }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left_bottom">
                    <hotDocument
                        :hotDocumentList="hotDocumentList"
                    ></hotDocument>
                </div>
            </div>
            <div class="right ml20">
                <div class="r_box">
                    <!-- <div
                        v-if="
                            userInfo &&
                            userInfo.is_vip == false &&
                            info.money > 0 &&
                            info.is_downnload == 0
                        "
                    >
                        <div class="pr-button cfff">模板价格</div>
                        <div class="pr-info">
                            支付小竹叶<span class="price ml6">{{
                                info.money
                            }}</span>
                        </div>
                    </div> -->
                    <no-ssr>
                        <div class="dl-button ml20">
                            <div class="model-moeny">
                                模板单价：
                                <span class="model-moeny-num">
                                    <!-- 去会员化，改成0了 -->
                                    <!-- {{
                                info.money
                            }} -->
                                    0
                                </span>
                                <span class="model-moeny-unit">小竹叶</span>
                                <span class="model-moeny-block">
                                    <!-- 会员 -->
                                    免费</span
                                >
                            </div>
                            <!-- <div class="vip-text">开通会员可免费下载任意模板</div> -->
                            <div class="vip-text">免费下载任意模板</div>
                            <div class="vip-pay-button" @click="vipPayButton">
                                <!-- 会员 -->

                                {{
                                    info.is_downnload == 1
                                        ? "查看模板"
                                        : "免费下载"
                                }}
                            </div>
                            <!-- <div
                            v-if="userInfo && userInfo.is_vip == 0"
                            class="button cfff"
                            @click="downloadFile"
                        >
                            <template v-if="info.is_downnload == 1">
                                <i
                                    class="el-icon-download"
                                    style="padding-right: 4px"
                                >
                                </i>
                                下载模板
                            </template>
                            <template v-else>
                                以{{ info.money }}小竹叶购买此模板
                            </template>
                        </div> -->
                            <!-- <div class="like flex-center-align" @click="setCollect">
                            <img
                                class=""
                                :src="
                                    info.is_collect == 1
                                        ? collection_s
                                        : collection
                                "
                                alt=""
                            />
                        </div> -->
                        </div>
                    </no-ssr>
                    <div class="info c666 fz14">
                        <div>上传时间：{{ info.push_date }}</div>
                        <div>文件类型：{{ info.tname }}</div>
                        <div>文件格式：{{ info.type }}</div>
                        <div>下载数量：{{ info.download }}</div>
                        <div class="width100">
                            文件来源：{{ info.resource }}
                        </div>
                        <div class="width100">
                            文件页数：{{ info.pages == '0' ? '--' : info.pages }}
                        </div>
                    </div>

                    <!-- <div
                        class="tips fz14"
                        v-if="
                            userInfo &&
                            isVip == false &&
                            info.money > 0 &&
                            info.is_downnload == 0
                        "
                    >
                        小竹会员免费下载，
                        <el-popover
                            placement="bottom"
                            trigger="hover"
                            @show="appShow = true"
                            @hide="appShow = false"
                        >
                            <div class="app-code">
                                <img
                                    class="img100"
                                    src="~/assets/images/index/app_code.png"
                                    alt="小竹财税APP"
                                />
                            </div>
                            <div slot="reference" class="showAppCode">
                                <span style="text-decoration: underline"
                                    >下载APP</span
                                >
                            </div>
                        </el-popover>
                        成为会员
                    </div> -->
                </div>
                <div class="xgtj">
                    <div class="xgtj-title">相关推荐</div>
                    <div class="xgtj-list">
                        <nuxt-link
                            v-for="(item, index) in relatedcommendlist"
                            :key="index"
                            class="xgtj-item"
                            :to="'/templates/' + item.id + '.html'"
                            target="_blank"
                        >
                            <div class="pic">
                                <img
                                    :src="
                                        'https://xzcs-video.oss-cn-beijing.aliyuncs.com' +
                                        item.pic
                                    "
                                    alt=""
                                />
                            </div>
                            {{ item.title }}
                        </nuxt-link>
                    </div>
                </div>
                <no-ssr>
                    <nuxt-link to="/service" class="qifuhaibao">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/moban.png"
                            alt=""
                        />
                    </nuxt-link>

                    <div class="wx-official-account">
                        <div class="wx-gzh-con">
                            <img
                                src="~/assets/images/index/wx_code.png"
                                alt=""
                            />
                            <div class="wx-gzh-con-text">
                                <div class="wx-gzh-con-title">关注公众号</div>
                                <span>免费领取</span>模板资料
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="wx-gzh-con">
                            <img
                                src="~/assets/images/index/app_code.png"
                                alt=""
                            />
                            <div class="wx-gzh-con-text">
                                <div class="wx-gzh-con-title">扫码下载APP</div>
                                完成小竹叶任务 <br />
                                转盘抽奖好礼等你领取
                            </div>
                        </div>
                    </div>
                </no-ssr>
            </div>
        </div>

        <el-dialog title="支付小竹叶" :visible.sync="payShow" width="408px">
            <div class="pay-dialog">
                <div v-if="userInfo && userInfo.money != null" class="money">
                    1
                </div>
                <div class="money-text">小竹叶</div>
                <div v-if="userInfo != null" class="cell">
                    当前小竹叶：{{ userInfo.money }}，
                    <nuxt-link class="gourl" to="/user/mybamboo">
                        去充值
                    </nuxt-link>
                </div>
                <div class="cell">
                    温馨提示：充值会员可以免费下载，
                    <nuxt-link class="gourl" to="/user/myvip">
                        成为会员
                    </nuxt-link>
                </div>
                <div class="but">
                    <el-button
                        type="primary"
                        class="but-pay"
                        round
                        @click="payModel"
                        >确定支付</el-button
                    >
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getListinfo,
    payModel,
    setCollect,
    get_relatedcommendlist,
    get_hotDocumentList,
} from "@/assets/api/modelAreaApi";
import { getanalysedata2 } from "@/assets/api/indexApi";

import { mapState, mapMutations, mapActions } from "vuex";
import { goTop, getText } from "@/assets/utils/utils.js";

import collection_s from "@/assets/images/modelArea/collect_1.png";
import collection from "@/assets/images/modelArea/collect_0.png";
//热门文档组件
import hotDocument from "@/components/hotDocument";
export default {
    components: {
        hotDocument,
    },
    async asyncData({ params }) {
        let data = {
            id: "",
            info: { money: 0 },
            meta: {
                title: "",
                keywords: "小竹财税模板专区,税模板专区,财税模板下载",
                description: "",
            },
            picList: [], //图片列表
            relatedcommendlist: [],
            hotDocumentList: [],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/templates/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        data.id = params.id.replace(".html", "");
        data.jsonld["@id"] += params.id;

        let res = await getListinfo({ id: data.id });
        data.info = res.data;
        if (res.code == 1) {
            data.jsonld.pubDate = data.jsonld.upDate = data.info.createtime;

            if (data.info.title) {
                data.meta.title = data.info.title;
                data.jsonld.title = data.info.title;
            }
            data.meta.description = data.info.abstract;
            data.jsonld.description = data.info.abstract;
            data.meta.keywords += `,${data.info.s_tname},${data.info.tname}`;

            data.picList = res.data.images.split("|");

            const res1 = await get_relatedcommendlist({
                title: data.info.title,
            });
            if (res1.code == 1) {
                data.relatedcommendlist = res1.data.list;
            }

            const res2 = await get_hotDocumentList({});
            if (res2.code == 1) {
                data.hotDocumentList = res2.data;
            }
        }

        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld),
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.meta.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.meta.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.meta.keywords,
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            // id: "",
            // info: { money: 0 },
            // picList: [], //图片列表

            isVip: false,
            payShow: false,
            payMoney: null,
            token: "",

            collection_s: collection_s,
            collection: collection,

            // meta: {
            //     title: "",
            //     keywords:
            //         "小竹财税模板专区,税模板专区,财税模板下载,合同范本,财税表格",
            //     description: "",
            // },

            // relatedcommendlist: [],
            // hotDocumentList: [],
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() {
        // this.id = this.$route.params.id.replace(".html", "");
    },
    mounted() {
        console.log(this.info);
        // this.picList = this.info.images.split("|");
        // this.get_relatedcommendlist();
        // this.getHotDocumentList();
        this.getListinfo();
        getanalysedata2({
            m_id: 5,
            type: 1,
            code: "PG10",
            describe: this.info.title,
        });

        this.token = window.localStorage.getItem("token");

        if (this.userInfo && this.userInfo.is_vip == 0) {
            this.isVip = false;
        } else {
            this.isVip = true;
        }
        this.setmenuIndex("50");
    },
    methods: {
        ...mapMutations("common", [
            "setloginShow",
            "setmenuIndex",
            "getUserInfo",
        ]),

        //获取详情数据
        async getListinfo() {
            let res = await getListinfo({ id: this.id });
            this.info = res.data;
            if (res.code == 1) {
                if (this.info.title) this.meta.title = this.info.title;
                this.meta.description = this.info.abstract;
                // this.picList = res.data.images.split("|");
                // this.get_relatedcommendlist();
                // this.getHotDocumentList();
                // getanalysedata2({
                //     m_id: 5,
                //     type: 1,
                //     code: "PG10",
                //     describe: this.info.title,
                // });
            }
        },

        // 相关推荐
        async get_relatedcommendlist() {
            const res = await get_relatedcommendlist({
                title: this.info.title,
            });
            if (res.code == 1) {
                this.relatedcommendlist = res.data.list;
            }
        },

        // 热门文档
        async getHotDocumentList() {
            const res = await get_hotDocumentList({});
            if (res.code == 1) {
                this.hotDocumentList = res.data;
            }
        },

        //下载文件
        downloadFile() {
            if (this.token) {
                //判断当前是否为会员,如果是会员则可以执行下载 判断当前是否已经支付过了,支付过了则可以下载
                if (this.userInfo.is_vip != 0 || this.info.is_downnload == 1) {
                    window.open(this.info.content); //下载
                    this.downModel();
                } else {
                    //不是会员的情况下 为购买
                    this.payShow = true;
                }
            } else {
                window.localStorage.removeItem("token");
                window.localStorage.removeItem("userInfo");
                this.setloginShow(true);
                this.$message({
                    message: "请先登录",
                    type: "warning",
                });
            }
        },
        //调下载接口
        async downModel() {
            let res = await payModel({ id: this.id });
            if (res.code == 1) {
                console.log("下载成功");
                this.getListinfo();
            }
        },

        //支付小竹叶
        async payModel() {
            this.payShow = false;
            let res = await payModel({ id: this.id });
            if (res.code == 1) {
                console.log("支付成功", res);
                window.open(this.info.content); //下载
                this.getUserInfo();
                this.getListinfo();
            }
        },
        //收藏
        async setCollect() {
            let res = await setCollect({ cid: this.id });
            console.log("shoucang", res);
            if (res.code == 1) {
                this.$message({
                    message: res.data,
                    type: "success",
                });
            }
            this.getListinfo();
        },

        // 会员下载按钮
        vipPayButton() {
            let token = localStorage.getItem('token')
            if (!token) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            // 对的 去会员化
            // if (this.userInfo.is_vip == 0) {
            //     this.$router.push({
            //         path: "/myvip",
            //         query: {
            //             vip: 1,
            //         },
            //     });
            //     return;
            // }
            // if (this.userInfo.is_vip > 0 || this.info.is_downnload == 1) {
            //     window.open(this.info.content);
            //     this.downModel();
            // }

            window.open(this.info.content);
            this.downModel();
        },
    },
};
</script>

<style lang="scss" >
.xzcs-pc-templates-detail {
    padding-bottom: 30px;

    .nav {
        align-items: center;
        margin: 30px auto;
        width: 1200px;
    }

    .main-body {
        margin: auto;
        width: 1200px;
        border-radius: 10px;
        // align-items: flex-start;

        .left {
            width: 789px;

            .left_top {
                border-radius: 10px;
                padding: 30px;
                background-color: #fff;
            }

            .pic {
                img {
                    margin-top: 25px;
                    width: 725px;
                    height: auto;
                    border: 1px solid #cbcbcb;
                    display: block;
                }
            }

            .left_middle {
                // margin-top: 16px;

                .prev-next {
                    background-color: #ffffff;
                    // border-bottom-left-radius: 6px;
                    // border-bottom-right-radius: 6px;
                    padding: 10px 45px;
                    font-size: 14px;
                    color: #999999;

                    > div {
                        display: flex;
                        justify-content: space-between;
                        padding-bottom: 10px;
                        .name {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            max-width: 566px;
                        }
                    }

                    > div:hover {
                        a {
                            text-decoration: underline;
                        }
                    }
                    .time {
                        color: #999999;
                    }
                }
            }

            .left_bottom {
                margin-top: 16px;
            }
        }

        .right {
            width: 391px;

            .r_box {
                // padding-bottom: 20px;
                // padding-left: 10px;
                overflow: hidden;
                max-height: 600px;
                background: #fff;
                border-radius: 10px;
                position: sticky;
                top: 94px;
                z-index: 100;
                // position: sticky;
                // top: 81px;

                .pr-button {
                    margin: 30px;
                    margin-bottom: 10px;
                    text-align: center;
                    width: 101px;
                    height: 38px;
                    line-height: 38px;
                    background: #9cafbd;
                    border-radius: 96px;
                }

                .pr-info {
                    padding: 30px;
                    display: flex;
                    align-items: center;
                    margin: 0 30px;
                    width: 326px;
                    height: 70px;
                    border: 1px solid #e2e2e2;

                    .price {
                        font-size: 30px;
                        font-weight: bold;
                        color: #fa5151;
                    }
                }

                .dl-button {
                    cursor: pointer;
                    margin-top: 18px;

                    .button {
                        margin-left: 7px;
                        text-align: center;
                        width: 340px;
                        height: 55px;
                        line-height: 55px;
                        background: #1c87f3;
                        border-radius: 4px;
                        font-size: 20px;
                    }

                    .like {
                        // display: block;
                        margin-top: 5px;
                        margin-left: 15px;
                        // padding: 3px;
                        // padding-left: 4px;
                        // text-align: center;
                        width: 40px;
                        height: 40px;
                        line-height: 37px;
                        border-radius: 50%;
                        border: 1px solid #cfcfcf;

                        img {
                            display: block;
                            padding: 0;
                            margin: 0;
                            width: 17px;
                            height: 15px;
                        }
                    }
                }

                .info {
                    margin: 20px 26px;
                    line-height: 40px;
                    display: flex;
                    flex-wrap: wrap;

                    div {
                        width: 50%;
                    }
                }

                .tips {
                    margin: 0 auto;
                    text-align: center;
                    line-height: 40px;
                    width: 326px;
                    height: 40px;
                    background: #e3f2ff;
                    border-radius: 168px;
                    color: #39aeff;

                    .app-code {
                        width: 150px;
                        height: 150px;
                    }

                    .showAppCode {
                        display: inline-block;
                    }
                }
            }
        }
    }

    .pay-dialog {
        border-radius: 10px;

        .cell {
            border-top: 1px solid #e8e8e8;
            width: 354px;
            height: 60px;
            margin: 0 auto;
            line-height: 60px;

            span {
                color: #1c87f3;
                cursor: pointer;
                text-decoration: underline;
            }
        }

        .money {
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            color: #fa5151;
            line-height: 45px;
        }

        .money-text {
            text-align: center;
            font-size: 18px;
            font-weight: 400;
            color: #666666;
            padding-top: 4px;
            padding-bottom: 45px;
        }

        .but {
            text-align: center;
            padding-top: 6px;

            .but-pay {
                width: 234px;
                height: 47px;
                border-radius: 47px;
            }
        }
    }

    .app-code {
        img {
            width: 150px;
            height: 150px;
        }
    }

    .collect {
        background: #faad14;
        border: 1px solid #faad14;
        color: #ffffff;
    }

    .collect-s {
        background: #ffffff;
        border: 1px solid #faad14;
        color: #faad14;
    }

    .collect,
    .collect-s {
        cursor: pointer;
        width: 114px;
        height: 40px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 40px;

        &:hover {
            opacity: 0.9;
        }

        i {
            padding-right: 3px;
        }
    }

    .title-collect {
        display: flex;
        justify-content: space-between;

        .title {
            width: 570px;
            font-size: 24px;
            font-weight: 500;
            line-height: 1.5;
        }
    }

    .vip-pay-button {
        margin-left: 7px;
        text-align: center;
        width: 340px;
        height: 55px;
        line-height: 55px;
        border-radius: 4px;
        font-size: 20px;
        background: linear-gradient(90deg, #ffb65b 0%, #fedc82 100%);
        margin-bottom: 18px;
        color: #4a2c00;

        &:hover {
            opacity: 0.9;
        }
    }

    .model-moeny {
        font-size: 20px;
        color: #333333;
        margin-bottom: 14px;
        margin-left: 7px;

        .model-moeny-num {
            font-size: 30px;
            font-weight: 700;
            color: #fa5151;
            position: relative;
            top: 3px;
        }

        .model-moeny-unit {
            font-size: 20px;
            font-weight: 700;
            color: #fa5151;
        }

        .model-moeny-block {
            display: inline-block;
            width: 56px;
            height: 21px;
            background: #ff8686;
            border-radius: 2px;
            font-size: 10px;
            color: #ffffff;
            line-height: 21px;
            text-align: center;
            position: relative;
            top: -8px;
            left: 5px;
        }
    }

    .vip-text {
        margin-left: 7px;
        margin-bottom: 15px;
        font-size: 12px;
        color: #999999;
    }

    .xgtj {
        width: 391px;
        padding: 25px;
        background-color: #fff;
        border-radius: 10px;
        margin-top: 20px;

        .xgtj-title {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            padding-bottom: 33px;
            padding-left: 7px;
        }

        .xgtj-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .xgtj-item {
                display: block;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                margin-bottom: 20px;
                width: 160px;

                .pic {
                    margin-bottom: 6px;
                    width: 160px;
                    height: 103px;
                    background: #faf9f8;
                    border: 1px solid #e2e2e2;

                    img {
                        object-fit: contain;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    .gourl {
        color: #1c87f3;
        text-decoration: underline;
    }

    .el-breadcrumb__inner.is-link {
        font-weight: normal !important;
    }

    .abstract {
        padding: 11px 24px;
        background-color: #fafafa;
        font-size: 12px;
        color: #999999;
        line-height: 22px;
        margin: 25px 0;
    }

    .wx-official-account {
        margin-top: 14px;
        background-color: #ffffff;
        position: sticky;
        top: 430px;
        .line {
            height: 1px;
            background-color: #e5e5e5;
            margin: 11px 0;
            width: 86%;
            margin: 0 auto;
        }
    }

    .wx-gzh-con {
        display: flex;
        align-items: center;
        padding: 20px 22px;

        img {
            width: 100px;
            height: 100px;
            margin-right: 16px;
        }
        .wx-gzh-con-text {
            font-size: 14px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
        }
        .wx-gzh-con-title {
            font-size: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
            padding-bottom: 9px;
        }
        span {
            color: #ff4646;
        }
    }

    .qifuhaibao {
        margin-top: 14px;
        display: block;
        img {
            width: 100%;
            height: auto;
        }
    }

    .width100 {
        width: 100% !important;
    }
}
</style>
